rem是以根元素(html元素)字体大小作为参考，是根元素字体大小的倍数
当自身字体大小改变时，em会跟着改变。
默认根元素的大小为16px，rem就相当于根元素的倍数 1rem就等于16px，20rem=16px*20=320px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
html{font-size:20px;}
h5{background:red;width:300px;height:30px;}
p{font-size:30px;background:green;width:20em}
h4{font-size:30px;background:blue;width:20rem}
</style>
</head>
<body>
<div>
<h5>我要好好学习1</h5>
<p>我要好好学习2</p>
<h4>我要好好学习3</h4>
</div>
</body>
</html>
返回值：如图，第3行h4元素设置的自身元素30px并没有生效，rem调用的是根元素（html）的20px像素生效。
</body>
</html>
当设置p元素为20em时，块级元素的字体是15px,所以p元素的宽是300px,跟h5元素的宽高是一样的。